<!--
 * @Description: 
 * @Author:  
 * @Date: 2024-02-21 14:14:39
 * @LastEditTime: 2024-03-18 17:31:33
 * @LastEditors:  
-->
<template>
	<div class="overview-station-bg">
		<div class="header">{{ data.basicInfoData.stationName }}</div>
		<div class="station-info-content">

			<Head title="场站运营信息">
				<template #content>
					<div class="row-box">
						<div class="time-box" v-for="(item, index) in data.detailForm" :key="index">
							<div class="label">{{ item.label }}</div>
							<div class="value">
								<el-tooltip effect="light" placement="bottom-start"
									:content="item.dic ? getLabel(item) : data.basicInfoData[item.prop]">
									{{ (item.dic ? getLabel(item) : data.basicInfoData[item.prop] || '--') }}
								</el-tooltip>
							</div>
						</div>
					</div>
				</template>
			</Head>

			<div class="station-device-content">
				<StationLeft :id="id"></StationLeft>
				<StationRight :data="data.rightData"></StationRight>
			</div>
		</div>

	</div>
</template>
<script lang="ts" setup>
	import Head from "@/components/head/index.vue";
	import Detail from "@/components/form/detail.vue";
	import StationLeft from "./components/stationLeft.vue";
	import StationRight from "./components/stationRight.vue";
	import dayjs from "dayjs";
	import { queryDicByParent } from "@/service/apis/api";
	import {
		queryStationDetail,
		queryPeripheralList,
	} from "@/service/apis/pile";

	const router = useRouter();
	const winHeight = ref(937);
	const stationId = ref("");

	const route = useRoute();
	const {
		query: { id },
	} = route;

	queryDicByParent({
		listDtos: ["stationStatus"],
	}).then((res : any) => {
		if (res) {
			data.detailForm[0].dic = res.stationStatus;
		}
	});

	const getLabel = (column : any) => {
		const obj : any = column.dic.find((item : any) => {
			return item.value == data.basicInfoData[column.prop];
		});
		return obj ? obj.label : "--";
	};

	const data = reactive({
		detailForm: [
			// {
			// 	label: "运营商",
			// 	prop: "operatorName",
			// },
			{
				label: "运营状态",
				prop: "stationStatus",
				dic: [] as any,
			},
			{
				label: "电桩总功率",
				prop: "sumPower",
				unit: "kW",
			},
			// {
			// 	label: "开放时间说明",
			// 	prop: "openExplain",
			// },

			{
				label: "停车说明",
				prop: "parkExplain",
			},
			{
				label: "电站地址",
				prop: "address",
				template: (row : any, index : number) => {
					if (!row.address) return "--";
					return `${row.areaCodeName}${row.address}`;
				},
			},
			// {
			// 	label: "站点描述",
			// 	prop: "stationDescribe",
			// },
		],
		basicInfoData: {} as any,
		leftData: {} as any,
		rightData: {} as any,
	});
	const initData = () => { };

	if (id) {
		// 获取场站运营信息
		queryStationDetail({ id: id }).then((res : any) => {
			if (res) {
				data.basicInfoData = res;
			}
		});
		// 周边设备
		queryPeripheralList({ stationId: id }).then((res2 : any) => {
			if (res2) {
				data.rightData = res2;
			}
		});
	}

	onMounted(() => {
	});

	onUnmounted(() => { });
</script>
<style lang="scss" scoped>
	.overview-station-bg {
		width: 100%;
		height: 100%;
		background: #f6f8ff;
		box-sizing: border-box;

		.qc-detail-wrap .item-wrap .info {
			width: 50%;

			div {
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.header {
			width: 100%;
			height: 80px;
			background: #718df6;
			font-size: 24px;
			font-weight: 600;
			color: #ffffff;
			line-height: 80px;
			text-align: center;
		}

		.station-info-content {
			padding: 14px 10px;

			.row-box {
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				padding: 20px 0 14px 0;

				.time-box {
					display: flex;
					justify-content: space-between;
					font-size: 16px;
					color: #555555;
					font-weight: 400;
					// width: calc(25% - 100px);
					width: 30%;
					padding: 0 4px;
					margin-bottom: 12px;

					.label {
						color: #262626;
						text-align: right;
						width: 120px;
					}

					.value {
						width: calc(100% - 120px);
						margin-left: 30px;
						word-break: keep-all;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						cursor: pointer;
					}
				}
			}

			.operator-info-box {
				padding-bottom: 12px;
			}
		}

		.station-device-content {
			display: flex;
			margin-top: 10px;

			// height: calc(100% - 132px);
			::-webkit-scrollbar {
				width: 0;
			}

			.left-station-info {
				width: calc(100% - 343px);
				margin-right: 12px;
			}

			.right-station-info {
				width: 343px;
				overflow-y: scroll;
			}
		}
	}

	:deep(.qc-head-wrap .title) {
		font-size: 19px !important;
		font-weight: 600;
	}
</style>